<template>
    <div>
        <img v-for="(src,index) in urls" :src="src.path? src.path:src" :key="index" style="width: 50px;height: 50px;" @click="onPreview"/>
        <el-image-viewer v-if="showViewer" :on-close="closeViewer" :url-list="url" @click.stop="handleClickItem"></el-image-viewer>
    </div>
</template>
<script>
    import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
    export default {
        props:{
            urls:{
                type: Array,
                required: true
            }
        },
        data () {
            return {
                showViewer: false,
            }
        },
        components: {
            ElImageViewer
        },
        computed: {
          url() {
            var url = []
            this.urls.forEach(val => {
              url.push(val.path)
            })
            return url
          }
        },
        mounted(){
        
	      },
        methods:{
        handleClickItem(){
		// 获取遮罩层dom
        this.$nextTick(() => {

		    let domImageMask = document.querySelector(".el-image-viewer__mask");
		     if (!domImageMask) {
		       return;
		     }
		     domImageMask.addEventListener("click", () => {
		       // 点击遮罩层时调用关闭按钮的 click 事件
		       document.querySelector(".el-image-viewer__close").click();
		     });
          })

	    },
          onPreview() {
          this.showViewer = true
          this.handleClickItem()
                // 获取遮罩层dom
		      //  let domImageMask = document.getElementsByClassName(".el-image-viewer__mask")[0];
          //  console.log(domImageMask);
            },
            closeViewer() {
                this.showViewer = false
            }
        }
    }
</script>
<style lang="scss" scoped>
/deep/.el-image-viewer__mask{
  z-index: 0;
}
</style>